<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.9.2/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-row gutter="30">
            <el-col span="6" class="slider-bar">
                <el-card shadow="always" style="border-radius: 30px;">
                    <div slot="header" class="clearfix">
                        <span>WE-SEND</span>
                        <el-button icon="el-icon-s-comment" class="connect-btn" type="text" @click="sendmail">反馈
                        </el-button>
                        <a ref="mailto" href="mailto:wicos@wicos.cn" style="display: none;"></a>
                    </div>
                    <p style="text-align: center;">发送还是接收，这是个问题</p>
                </el-card>
                <div class="slider-btn">
                    <el-button type="primary" icon="el-icon-folder-checked" round>接收</el-button>
                    <el-button type="success" icon="el-icon-edit-outline" round style="float: right;"
                        @click="dialogFormVisible = true">发送</el-button>
                </div>
                <el-card>
                    <template v-if="showlastid">
                        <i class="el-icon-share">   您的取信码为：<h2>{{lastid}}</h2></i>
                    </template>
                    <el-image :src="lastqr"></el-image>
                </el-card>
            </el-col>
            <el-col span="18">
                <el-row gutter="20" class="content">
                    <el-col span="6">
                        <template v-for="i in content_one">
                            <div v-if="i.type === 0">
                                <show-text v-bind:indata="i" @sendid="getData"></show-text>
                            </div>
                            <div v-if="i.type === 1">
                                <show-img v-bind:indata="i" @sendid="getData"></show-img>
                            </div>
                            <div v-if="i.type === 2">
                                <show-file v-bind:indata="i" @sendid="getData"></show-file>
                            </div>
                        </template>
                    </el-col>
                    <el-col span="6">
                        <template v-for="i in content_two">
                            <div v-if="i.type === 0">
                                <show-text v-bind:indata="i" @sendid="getData"></show-text>
                            </div>
                            <div v-if="i.type === 1">
                                <show-img v-bind:indata="i" @sendid="getData"></show-img>
                            </div>
                            <div v-if="i.type === 2">
                                <show-file v-bind:indata="i" @sendid="getData"></show-file>
                            </div>
                        </template>
                    </el-col>
                    <el-col span="6">
                        <template v-for="i in content_three">
                            <div v-if="i.type === 0">
                                <show-text v-bind:indata="i" @sendid="getData"></show-text>
                            </div>
                            <div v-if="i.type === 1">
                                <show-img v-bind:indata="i" @sendid="getData"></show-img>
                            </div>
                            <div v-if="i.type === 2">
                                <show-file v-bind:indata="i" @sendid="getData"></show-file>
                            </div>
                        </template>
                    </el-col>
                    <el-col span="6">
                        <template v-for="i in content_four">
                            <div v-if="i.type === 0">
                                <show-text v-bind:indata="i" @sendid="getData"></show-text>
                            </div>
                            <div v-if="i.type === 1">
                                <show-img v-bind:indata="i" @sendid="getData"></show-img>
                            </div>
                            <div v-if="i.type === 2">
                                <show-file v-bind:indata="i" @sendid="getData"></show-file>
                            </div>
                        </template>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog title="发送" :visible.sync="dialogFormVisible">
            <el-input type="textarea" v-model="sendmsg" rows="10"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendMsg">确 定 发 送</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.9.2/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
<script>
    Vue.component('show-text', {
        props: ['indata'],
        template: '<el-card style="margin-top:10px;" :body-style="{ padding: \'0px\' }"><div style="padding: 15px;"><p class="zhehang">{{ indata.content }}</p><div class="bottom clearfix"><time class="time">{{ indata.time }}</time><el-button type="text" class="button" @click="sendid(indata.id)">查看</el-button></div></div></el-card>',
        methods: {
            sendid: function (id) {
                this.$emit("sendid", id)
            }
        }
    })
    Vue.component('show-img', {
        props: ['indata'],
        template: '<el-card style="margin-top:10px;" :body-style="{ padding: \'0px\' }"><img :src = "getSrc()" class= "image"><div style="padding: 15px;"><div class="bottom clearfix"><time class="time">{{indata.time}}</time><el-button type="text" class="button" @click="sendid(indata.id)">查看</el-button></div></div></el-card>',
        methods: {
            sendid: function (id) {
                this.$emit("sendid", id)
            },
            getSrc: function () {
                let srcs = this.indata.content
                return srcs
            }
        }
    }),
        Vue.component('show-file', {
            props: ['indata'],
            template: '<el-card style="margin-top:10px;" :body-style="{ padding: \'0px\' }"><div style="padding: 15px;"><span>{{indata.content}}</span><div class="bottom clearfix"><time class="time">{{indata.time}}</time><el-button type="text" class="button" @click="sendid(indata.id)">查看</el-button></div></div></el-card>',
            methods: {
                sendid: function (id) {
                    this.$emit("sendid", id)
                }
            }
        })
    new Vue({
        el: '#app',
        data: function () {
            return {
                content_one: [],
                content_two: [],
                content_three: [],
                content_four: [],
                dialogFormVisible: false,
                sendmsg: null,
                ttimes: null,
                lastid:null,
                lastqr:"/static/qr.png",
                showlastid:false
            }

        },
        created: function () {
            let that = this
            //console.log(this.$message);
            axios.post("/allitem", {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
            }).then(function (res) {
                let typedata = res.data.alldata
                console.log(typedata);
                for (let i = 0; i < typedata.length; i++) {
                    if (i % 4 == 1) {
                        that.content_one.push({ type: typedata[i]['type'], content: typedata[i]["content"], time: typedata[i]["date"], id: typedata[i]["id"] })
                    }
                    if (i % 4 == 2) {
                        that.content_two.push({ type: typedata[i]['type'], content: typedata[i]["content"], time: typedata[i]["date"], id: typedata[i]["id"] })
                    }
                    if (i % 4 == 3) {
                        that.content_three.push({ type: typedata[i]['type'], content: typedata[i]["content"], time: typedata[i]["date"], id: typedata[i]["id"] })
                    }
                    if (i % 4 == 0) {
                        that.content_four.push({ type: typedata[i]['type'], content: typedata[i]["content"], time: typedata[i]["date"], id: typedata[i]["id"] })
                    }
                }
            })
        },
        mounted: function () {

        },
        methods: {
            getData: function (res) {
                alert(res)
            },
            sendmail: function (res) {
                this.$refs.mailto.click()
            },
            dateTime: function () {
                let that = this

            }
            ,
            sendMsg: function (res) {
                let that = this
                axios.get('/webtime').then(function (res) {
                    var ttime = res.data
                    //console.log(ttime);
                    axios.post("/add", {
                        "id": ttime['id'],
                        "date": ttime['time'],
                        "type": 0,
                        "content": that.sendmsg
                    }).then(function (res) {
                        if (res.data.code == 0) {
                            that.lastid = ttime['id']
                            that.showlastid = true
                            that.lastqr = res.data.msg
                            that.$message({
                                message: '您的信息已发送',
                                type: 'success'
                            });
                        }
                    })
                })
                this.dialogFormVisible = false
            }
        }
    })
</script>
<style>
    .slider-bar {
        padding-top: 20px;
    }

    .content {
        margin-top: 20px;
    }

    .connect-btn {
        float: right;
        padding: 3px 0;
    }

    .slider-btn {
        margin: 20px;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .card-no {
        padding: 0px;
    }

    .zhehang {
        word-wrap: break-word;
        word-break: break-all;
    }
</style>

</html>